<!DOCTYPE html>
<html>
<head>
  <title>商品详情</title>
  <base th:href="${#request.getContextPath()}+'/'">
  <link rel="stylesheet" type="text/css" href="css/public.css"/>
  <link rel="stylesheet" type="text/css" href="css/proList.css"/>
  <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="js/jquery.min.js"></script>
  <!-- Custom Theme files -->
  <!--theme-style-->
  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  <!--//theme-style-->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="keywords" content="New Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
  <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
  <!--fonts-->
  <link href='http://fonts.useso.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
  <link href='http://fonts.useso.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'><!--//fonts-->
  <!-- start menu -->
  <link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
  <script type="text/javascript" src="js/memenu.js"></script>
  <script>$(document).ready(function(){$(".memenu").memenu();});</script>


  <script src="js/main.js"></script>
  <script src="js/simpleCart.min.js"> </script>
</head>
<body>
<div class="head">
    <div class="wrapper clearfix">
        <div class="clearfix" id="top">
            <h1 class="fl"><a href="User/loginGet"><img src="img/logo.png"/></a></h1>
            <ul class="clearfix" id="bott">
                <li><a href="User/loginGet">首页</a></li>
                <li th:each="productTypes:${productTypes}">
                    <a th:text="${productTypes.productTypeName}" th:href="'User/mushrooms?id='+${productTypes.productTpyeId}"></a>
                </li>
            </ul>
            <div class="fr clearfix" id="top1">
                <p class="fl"  th:if="${session.Userinfo == null}" >
                    <a href="User/loginUser" id="login">登录</a><a href="User/register" id="reg">注册</a>
                </p>
                <p class="fl"  th:if="${session.Userinfo != null}" >
                    <a href="User/Upersonal_center" th:text="'亲爱的'+${session.Userinfo.userName}+'，欢迎登录！'"></a><a href="User/backUserLogin">退出登录</a>
                </p>
                <div class="btn fl clearfix">
                    <a href="User/Upersonal_center"><img src="img/grzx.png"/></a>
                    <a href="User/Ushoppingcart"><img src="img/gwc.png"/></a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-md-9 product-price1" style="align-content: center">
  <div class="col-md-5 single-top">
    <div class="flexslider">

      <div class="flex-viewport" style="overflow: hidden; position: relative;">
        <ul class="slides" style="width: 1200%; transition-duration: 0.6s; transform: translate3d(-582px, 0px, 0px);">
          <li data-thumb="images/si.jpg" class="clone" aria-hidden="true" style="width: 291px; float: left; display: block;">
            <img th:src="${productsinfor.productImage}" draggable="false">
          </li>
        </ul>
      </div>
      </li>

    </div>
    <!-- FlexSlider -->
    <script defer="" src="js/jquery.flexslider.js"></script>
    <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen">

    <script>
      // Can also be used with $(document).ready()
      $(window).load(function() {
        $('.flexslider').flexslider({
          animation: "slide",
          controlNav: "thumbnails"
        });
      });
    </script>
  </div>
  <div class="col-md-7 single-top-in simpleCart_shelfItem">
    <div class="single-para ">
      <h4><font style="vertical-align: inherit;">
        <font style="vertical-align: inherit;" th:text="${productsinfor.productName}"></font>
      </font></h4>
      <div class="star-on">
        <ul class="star-footer">
<!--          <li th:text="${session.Userinfo}"><a href="#"><i> </i></a></li>-->
          <li><a href="#"><i> </i></a></li>
          <li><a href="#"><i> </i></a></li>
          <li><a href="#"><i> </i></a></li>
          <li><a href="#"><i> </i></a></li>
        </ul>
        <div class="review">
          <a href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 客户评价</font></font></a>

        </div>
        <div class="clearfix"> </div>
      </div>

      <h5 class="item_price">
        <font style="vertical-align: inherit;">
          商品价格
          <font style="vertical-align: inherit;" th:text="${productsinfor.productPrice}"> </font>
          $
        </font>
      </h5>
      <p>
        <font style="vertical-align: inherit; font-size: 18px">商品详情：
          <font style="vertical-align: inherit;" th:text="${productsinfor.productIntroduce}">
          </font>
        </font>
      </p>
      <p style="font-size: 18px">
        数量:&nbsp;&nbsp;库存
        <span th:text="${productsinfor.productTotal}"></span>件
      </p>
      <p  style="border-top: 30px">
      <ul class="tag-men">
        <li>
          <span style="font-size: 18px">商家信息</span>
            <span class="women1" th:text="${productsinfor.Producer.producerType}+':'+${productsinfor.Producer.producerName}"></span>
        </li>
        <li><span style="font-size: 18px">商家地址</span>
          <span class="women1" th:text="${productsinfor.Producer.producerAddress}" ></span></li>
      </ul>
      </p>
      <div class="num clearfix">
        <img class="fl sub" src="img/temp/sub.jpg" disabled="disabled">
        <span class="fl" contenteditable="true" style="font-size: 18px;margin: 0 10px" id="num">1</span>
        <img class="fl add" src="img/temp/add.jpg">
      </div>

      <a   class="add-cart item_add" th:onclick="ToOrder([[${productsinfor}]])"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">立即购买</font></font></a>
      <a href="/User/Ushoppingcart" th:onclick="shopCartadd([[${productsinfor}]])" class="add-cart item_add"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">添加到购物车</font></font></a>
    </div>
  </div>
</div>
<div class="gotop"><a href="User/Ushoppingcart">
  <dl>
    <dt><img src="img/gt1.png"/></dt>
    <dd>去购<br/>物车</dd>
  </dl>
</a><a href="User/Upersonal_center">
  <dl>
    <dt><img src="img/gt3.png"/></dt>
    <dd>个人<br/>中心</dd>
  </dl>
</a>
    <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/nav.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/pro.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/cart.js" type="text/javascript" charset="utf-8"></script>
    <script>
        //par是形参，而上面的那个是实参
        function ToOrder(productsinfor){
            let num = $("#num").text();
            console.log(num)
            console.log(productsinfor)
            $.post("User/ToOrder",
                {
                    'num':num,
                    'productId':productsinfor.productId,
                    'producerId': productsinfor.producer.producerId,
                    'productPrice': productsinfor.productPrice,

                },function (response){
                console.log(response)
                    alert(response.msg)
                    window.location.href='/User/Myorderq';
                })
        }
        function shopCartadd(productsinfor){
            let num = $("#num").text();
            console.log(num)
            console.log(productsinfor)
            $.post("User/addShopCart",{
                'num':num,
                'productId':productsinfor.productId,
                'producerId': productsinfor.producer.producerId,
                'productPrice': productsinfor.productPrice,
            },function (response){
                console.log(response)
                alert(response.msg)
                window.location.href='/User/Ushoppingcart';
            })
        }
    </script>


</body>
</html>
